<template>
	<view class="indexCategory">
		<!-- 分类 -->
		<uni-grid class="index-category" :column="col" :show-border="false" :square="false">
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="item.id">
				<view class="item">
					<image class="image" :src="item.img" @tap="jumpByPageType(item.url)" mode="aspectFill" />
					<text class="text">{{item.title}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>	
  import { mapState } from 'vuex';
	import uniGrid from '@dcloudio/uni-ui/lib/uni-grid/uni-grid.vue';
	import uniGridItem from '@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item.vue';
	import { links } from '../../common/mixins.js';
	
	export default {
		name: 'indexCategory',
		components: {
			uniGrid,
			uniGridItem,
		},
		mixins: [ links ],
		props: {
			theData: {
				type: Object,
				default: () => {
					return {
						col: 5,
						list: []
					};
				}
			}
		},
		computed: {
		  ...mapState ([
		    'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
		  ]),
			col() {
				return this.theData.col;
			},
			list() {
				let list = JSON.parse(JSON.stringify(this.theData.list));
				return list.map((item) => {
					let {
						id: id,
						img: img,
						title: title,
						url: url,
						...rest
					} = item;
					img = this.debugSetting.resourcePath + img;
					return { id, img, title, url, rest};
				});
			},
		},
	}
</script>

<style lang="scss">
	.indexCategory {
		.index-category{
			background: #fff;
			margin: 10upx 0;
			.item{
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 10px 0;
				.image {
					width: 88upx;
					height: 88upx;
					margin-bottom: 8upx;
					border-radius: 50%;
					box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
				}
				.text{	
					line-height: 1.3;
				}
			}
		}
	}
</style>
